<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.19.4/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.19.4/locale/zh-cn.js"></script>

</head>

<body>
    <table id="dg"></table>


    <div id="tb" style="padding:2px 5px;">
        <input id="name" label="用户名称:" style="width:100%;">

        <a href="#" id="searchData" class="easyui-linkbutton" iconCls="icon-search">查找</a>
        <a href="#" id="addData" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
        <a href="#" id="removesData" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
    </div>

    <div id="dlg" class="easyui-dialog" title="用户增改" data-options="iconCls:'icon-save',closed: true" style="width:450px;height:450px;padding:10px">



        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <input name="_id" style="width:100%;margin-bottom: 10px;display: none" value="">


            <div style="margin-bottom:20px; margin-top: 10px">
                <input class="easyui-textbox" name="username" style="width:80%" data-options="label:'用户名:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-passwordbox" name="password" style="width:80%" data-options="label:'密码:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:80%" data-options="label:'真名:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="age" style="width:80%" data-options="label:'年龄:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="phone" style="width:80%" data-options="label:'手机号:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:80%" data-options="label:'邮件:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="education" style="width:80%" data-options="label:'教育程度:',required:true">
            </div>
            <div style="margin-bottom:20px">婚姻状况:&nbsp;&nbsp;&nbsp;&nbsp;
                已婚： <input type="radio" name="marriages" class="marriage1">
                未婚：<input type="radio" name="marriages" class="marriage2" checked>
                <input id="marriage" name="marriage" style="width:100%;display: none" value="">
            </div>
            <div style="margin-bottom:20px">
                    <input class="easyui-datebox" name="time" style="width:80%" data-options="label:'时间:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="hobby" style="width:100%" data-options="label:'兴趣:',required:true">
            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
        </div>





    </div>
</body>

</html>

<script>
    // console.log(window.parent.globalURL);
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                if ($('.marriage1').is(':checked')) {
                    console.log('true')
                    $('#marriage').val(true);
                } else {
                    console.log('false')
                    $('#marriage').val(false);
                }
                if ($(this).form('enableValidation').form('validate')) {
                    // 将当前页面的表单信息进行获取，然后进行ajax请求
                    var formData = $("#ff").serializeJSON();
                    // console.log(formData._id.length);
                    if (formData._id.length > 0) {
                        // update
                        $.ajax({
                            url: `${window.parent.globalURL}users/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        })
                    } else {
                        // add
                        delete formData._id;
                        $.ajax({
                            url: `${window.parent.globalURL}users`,
                            type: 'post',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        })

                    }


                }
                // 表单验证
            }

        });
        return false; // 阻止默认事件
    }

    function clearForm() {
        $('#ff').form('clear');
    }


    $('#dg').datagrid({
        url: `${window.parent.globalURL}users/list`,
        fit: 'true',
        border: false,
        pagination: true,
        toolbar: '#tb',
        columns: [
            [{
                field: 'ck',
                checkbox: true
            }, {
                field: 'username',
                title: '用户名',
                width: 100
            }, {
                field: 'password',
                title: '密码',
                width: 80
            }, {
                field: 'name',
                title: '真名',
                width: 90
            }, {
                field: 'age',
                title: '年龄',
                width: 70
            }, {
                field: 'phone',
                title: '手机号',
                width: 110
            }, {
                field: 'email',
                title: '邮件',
                width: 130
            }, {
                field: 'education',
                title: '教育程度',
                width: 80
            }, {
                field: 'marriage',
                title: '婚姻状况',
                width: 80
            }, {
                field: 'hobby',
                title: '兴趣',
                width: 120
            }, {
                field: 'time',
                title: '时间',
                width: 125,
                formatter: function(value,row,index){
                    return moment(row.time).format('LL')
                }
            }, {
                field: '_id',
                title: '操作',
                width: 110,
                formatter: function(value, row, index) {
                    return `<a href="javascript:void(0)" onclick="updateData('${row._id}')" style="text-decoration:none">修改</a> <a href="javascript:void(0)" onclick="deleteData('${row._id}')" style="text-decoration:none">删除</a>`
                }
            }]
        ]
    });

    function deleteData(id) {

        $.messager.confirm('确认对话框', '你确认删除?', function(r) {
            if (r) {

                $.ajax({
                    url: `${window.parent.globalURL}users/${id}`,
                    type: 'delete'
                }).done(function(res) {
                    $("#dg").datagrid('reload');
                })
            }
        });

    }

    function updateData(id) {

        $.ajax({
            url: `${window.parent.globalURL}users/${id}`,
            type: 'get'
        }).done(function(res) {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        })

    }

    function deleteDatas() {
        var rows = $('#dg').datagrid('getSelections');
        var ids = [];
        for (var i = 0; i < rows.length; i++) {
            ids.push(rows[i]._id);
        }

        $.messager.confirm('确认对话框', '你确认删除?', function(r) {
            if (r) {
                $.ajax({
                    url: `${window.parent.globalURL}users/removes`,
                    type: 'post',
                    data: {
                        ids: ids.toString()
                    }
                }).done(function(res) {
                    $("#dg").datagrid('reload');
                })
            }
        });


    }

    $("#searchData").click(function() {
        $('#dg').datagrid({
            queryParams: {
                username: $("#name").val()
            }
        });
    })


    $("#addData").click(function() {
        $('#dlg').dialog('open');
    })

    $("#removesData").click(function() {
        deleteDatas();
    })

    $(function() {
        $('#dg').datagrid({
            title: '测试表格',
            pagination: true, //显示分页工具栏
        });
        var p = $('#dg').datagrid('getPager');
        $(p).pagination({
            pageSize: 10, //每页显示的记录条数，默认为10
            pageList: [5, 10, 15], //可以设置每页记录条数的列表
            beforePageText: '第', //页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
        });
    });


</script>